<template>
	<div>
		MessageComp
		<ul>
			<li v-for="message in messages" :key="message.id">
				<!-- <router-link :to="`/home/message/detail/${message.id}?name=jack`">
					{{ message.title }}
				</router-link> -->

				<!-- params参数，不能用path形式 -->
				<!-- <router-link
					:to="{
						path: '/home/message/detail',
						params: {
							id: message.id,
						},
					}"
				>
					{{ message.title }}
				</router-link> -->

				<router-link
					:to="{
						name: 'DetailComp',
						params: {
							id: message.id,
						},
						query: {
							name: 'jack',
						},
					}"
				>
					{{ message.title }}
				</router-link>
				<button @click="push(message.id)">push</button>
				<button @click="replace(message.id)">replace</button>
			</li>
		</ul>
		<button @click="back">回退</button>
		<button @click="forward">前进</button>
		<!-- 在2级路由写router-view才会显示3级路由 -->
		<router-view />
	</div>
</template>

<script>
export default {
	name: "MessageComp",
	data() {
		return {
			messages: [],
		};
	},
	mounted() {
		// 模拟发送请求获取数据
		setTimeout(() => {
			this.messages = [
				{ id: 1, title: "title001" },
				{ id: 2, title: "title002" },
				{ id: 3, title: "title003" },
			];
		}, 1000);
	},
	methods: {
		push(id) {
			// 编程式导航
			// console.log(this.$router);
			// this.$router.push(`/home/message/detail/${id}`);
			this.$router.history.push({
				name: "DetailComp",
				params: {
					id,
				},
				query: {
					name: "jack",
				},
			});
		},
		replace(id) {
			this.$router.history.replace({
				name: "DetailComp",
				params: {
					id,
				},
				query: {
					name: "jack",
				},
			});
		},
		back() {
			this.$router.back();
		},
		forward() {
			this.$router.forward();
		},
	},
};
</script>

<style></style>
